<template>
  <section class="ProjectSearch-container">
    <quick-search-layout>
      <template #condition>
        <el-form
          :model="condition"
          ref="form"
          inline
          size="small"
          label-position="top"
          label-width="0"
        >
          <el-form-item prop="name">
            <el-input v-model="condition.name" placeholder="输入名称" clearable>
            </el-input>
          </el-form-item>

          <el-form-item prop="no">
            <el-input v-model="condition.no" placeholder="输入编号" clearable>
            </el-input>
          </el-form-item>

          <el-form-item prop="channel_name">
            <el-select
              v-model="condition.channel_name"
              placeholder="请选择渠道"
              clearable
              filterable
            >
              <el-option
                v-for="item in channelOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-button
            size="small"
            explain
            type="primary"
            icon="el-icon-search"
            @click="getProjects"
            >搜索</el-button
          >
          <el-button size="small" explain icon="el-icon-refresh" @click="reset"
            >重置</el-button
          >
        </el-form>
      </template>

      <slot slot="list" />

      <template #pagination>
        <el-pagination
          @size-change="getProjects"
          @current-change="getProjects"
          :current-page.sync="condition.page_index"
          :page-sizes="[5, 8, 10, 20, 30, 40, 50, 100, 200]"
          :page-size.sync="condition.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </quick-search-layout>
  </section>
</template>

<script>
import _api from "../../common/api/project";
import _custmoer from "../../common/api/customer";
import _employyees from "../../common/api/employee";
export default {
  data() {
    return {
      total: 0,
      condition: {
        no: "",
        channel_name: "",
        name: "",
        page_index: 1,
        page_size: 10,
      },
      conditionCustomer: {
        page_index: 1,
        page_size: 999,
      },
      conditionEmployee: {
        page_index: 1,
        page_size: 999,
      },
      channelOpt: [
        {
          value: "本部",
          label: "本部",
        },
        {
          value: "金蝶分公司（重庆）",
          label: "金蝶分公司（重庆）",
        },
      ],
    };
  },
  methods: {
    async getProjects() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.total = +result.total;
        this.$emit("onSearch", result.data);
      } catch (error) {}
    },

    async reset() {
      this.$refs.form.resetFields();
      await this.getProjects();
    },

    async geCustomers() {
      try {
        const result = await _custmoer.getListAsync(this.conditionCustomer);
        const customer = result.data.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.$emit("onCustomers", customer);
      } catch (error) {}
    },

    // 获取员工列表
    async geEmployyee() {
      try {
        const result = await _employyees.getListAsync(this.conditionEmployee);
        const employees = result.data.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.$emit("onEmployyee", employees);
      } catch (error) {}
    },

    // 格式类型转换
    formFormat() {
      this.form.leader = Number(this.form.leader);
      this.form.customer_id = Number(this.form.customer_id);
      this.form.priority = Number(this.form.priority);
      this.form.stage = Number(this.form.stage);
    },

    // 时间格式转换
    dateTransform(value) {
      const date = new Date(value);
      const year = date.getFullYear();
      const month = this.padZero(date.getMonth() + 1);
      const day = this.padZero(date.getDate());
      return `${year}-${month}-${day}`;
    },

    padZero(value) {
      return value < 10 ? "0" + value : value;
    },
  },
  mounted() {
    this.getProjects();
    this.geCustomers();
    this.geEmployyee();
  },
};
</script>

<style lang="scss" scoped>
.ProjectSearch-container {
  height: 100%;
}
</style>